<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
    <TITLE> 设备树的优化</TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="../ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style>
        body {
            background-color: white;
            margin: 0;
            padding: 0;
            text-align: center;
        }

        div, p, table, th, td {
            list-style: none;
            margin: 0;
            padding: 0;
            color: #333;
            font-size: 12px;
            font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
        }

        #testIframe {
            margin-left: 10px;
        }
    </style>
    <script type="text/javascript" src="../ztree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="../ztree/js/jquery.ztree.core.js"></script>
    <!--<script src="http://mockjs.com/dist/mock.js"></script>-->
    <!--<script type="text/javascript" src="./bower_components/mockjs/dist/mock.js"></script>-->
    <script src="../js/mock/mock.js"></script>
  <!--  <script type="text/javascript">
        require.config({
            paths: {
                'mock': 'ztree/js/mock.js'
            }
        })
    </script>-->
    <SCRIPT type="text/javascript">
        <!--
        var zTree;

        var setting = {
            view: {
                dblClickExpand: false,      //双击节点时是否展示下级(boolean/function) function 有两个参数(treeId,treeNode)
                showLine: true,             //是否展示连接线
                selectedMulti: false        //是否允许多选   不是展示checkBoc
            },

            async: {
                enable: true,
                url: "http://test.cn",
                autoParam: ["id"],
                dataFilter: filter
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            },
            callback: {
//                beforeClick: function (treeId, treeNode) {
//                    var zTree = $.fn.zTree.getZTreeObj("tree");
//                    //添加对后台的调用进行数据的查询展示
//                    if (treeNode.isParent) {
//                        zTree.expandNode(treeNode);
//                        return false;
//                    }
//                },
                onClick : onClick,
                // beforeClick: beforeClick,
                beforeAsync: beforeAsync,
                // onAsyncError: onAsyncError,
                onAsyncSuccess: onAsyncSuccess,
                onExpand: onExpand
            }
        };

        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            return childNodes.list;
        }
        function beforeAsync(treeId, treeNode) {
            return true;
        }
        function onAsyncSuccess(event, treeId, treeNode, msg) {
            console.log('11');
        }
        function onExpand() {
            console.log('222');
        }
        function onClick(e, treeId, treeNode) {
            console.log(arguments);
            var zTree = $.fn.zTree.getZTreeObj("tree");
            var newNode = {name:"newNode1"};
            zTree.addNodes(treeNode, newNode);
        }
        var zNodes = [
            {id: '151', pId: '100', name: "上海市电力公司", file: "func/chart"},
            {id: '159', pId: '100', name: "松江供电公司", file: "func/filebeat"},
            {id: '152', pId: '100', name: "市区供电公司", file: "ztree/demo/cn/core/standardData"},
            {id: '154', pId: '100', name: "市南供电公司", file: "core/noicon"}
        ];
        var setting2 = {
            view: {
                dblClickExpand: false,      //双击节点时是否展示下级(boolean/function) function 有两个参数(treeId,treeNode)
                showLine: true,             //是否展示连接线
                selectedMulti: false        //是否允许多选   不是展示checkBoc
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: ""
                }
            }
        }
        var zNode2 = [
            {id: '100', pId: '2c905dc45d5ea6a9015da17d81650853', name: "上海电力", open: true},
            {id: '151', pId: '100', name: "上海市电力公司", file: "func/chart"},
            {id: '159', pId: '100', name: "松江供电公司", file: "func/filebeat"},
            {id: '152', pId: '100', name: "市区供电公司", file: "ztree/demo/cn/core/standardData"},
            {id: '154', pId: '100', name: "市南供电公司", file: "core/noicon"},
            {id: '10001', pId: '151', name: "交流3kV大馈线", file: "core/custom_icon"},
            {id: '10002', pId: '151', name: "交流6kV大馈线", file: "core/custom_iconSkin"},
            {id: '10003', pId: '151', name: "交流10kV大馈线", file: "core/custom_font"},
            {id: '10004', pId: '151', name: "交流15.75kV大馈线", file: "core/url"},
            {id: '10005', pId: '151', name: "交流20kV大馈线", file: "core/async"}
        ];

        $(document).ready(function () {
            var t = $("#tree");
            t = $.fn.zTree.init(t, setting);
            /* var zTree = $.fn.zTree.getZTreeObj("tree");
             zTree.selectNode(zTree.getNodeByParam("id", 101));*/

            var t2 = $("#rightTree");
            t2 = $.fn.zTree.init(t2, setting2, zNode2);
            var zTree2 = $.fn.zTree.getZTreeObj("rightTree");
            zTree2.selectNode(zTree2.getNodeByParam("id", '159'));
        });

        function loadReady() {
//
        }
        //准备数据
        /* Mock.mock('http://test.cn', {
         'name'     : '@name',
         'age|1-100': 100,
         'color'    : '@color',
         'id|+1' : 100,
         'pid'    : '10001'
         });*/
        Mock.mock('http://test.cn', {    //匹配.json文件
            'list|1-10': [{      //数据模板，随机生成一个对象数组
                'name': '@name',
                'age|1-100': 100,
                'color': '@color',
                'id|+1': 100,
                'pid': '0'
            }]
        })


        //-->
    </SCRIPT>
</HEAD>

<BODY>
<TABLE border=0 align=left>
    <TR>
        <TD width=400px align=left valign=top style="BORDER-RIGHT: #999999 1px dashed">
            <ul id="tree" class="ztree" style="width:400px; overflow:auto;"></ul>
        </TD>
        <!--<TD width=770px align=left valign=top><IFRAME ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100%  height=600px SRC="func/chart.html"></IFRAME></TD>-->
        <TD width=400px align=right valign=top style="BORDER-RIGHT: #999999 1px dashed">
            <ul id="rightTree" class="ztree" style="width:400px; overflow:auto;"></ul>
        </TD>
    </TR>
</TABLE>

</BODY>
</HTML>
